

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style type="text/css">
  #dv{
    width: 300px;
    height:200px;
    position: absolute;
    left:300px;
    top:100px;
  }
  .strengthLv0 {
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv1 {
    background: red;
    height: 6px;
    width: 40px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv2 {
    background: orange;
    height: 6px;
    width: 80px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv3 {
    background: green;
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }
</style>
<body>
<div id="dv">
  <label for="pwd">密码</label>
  <input type="text" id="pwd" maxlength="16"><!--课外话题-->
  <div>
    <em>密码强度：</em>
    <em id="strength"></em>
    <div id="strengthLevel" class="strengthLv0"></div>
  </div>
</div>
<script src="common.js"></script>
<script>

  //获取文本框注册键盘抬起事件
  my$("pwd").onkeyup=function () {
    //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
    //如果密码的长度是小于6的,没有必要判断
//    if(this.value.length>=6){
//     var lvl= getLvl(this.value);
//      my$("strengthLevel").className="strengthLv"+lvl;
//    }else{
//      my$("strengthLevel").className="strengthLv0";
//    }
    my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
  };

  //给我密码,我返回对应的级别
  function getLvl(pwd) {
    var lvl=0;//默认是0级
    //密码中是否有数字,或者是字母,或者是特殊符号
    if(/[0-9]/.test(pwd)){
      lvl++;
    }
    //判断密码中有没有字母
    if(/[a-zA-Z]/.test(pwd)){
      lvl++;
    }
    //判断密码中有没有特殊符号
    if(/[^0-9a-zA-Z_]/.test(pwd)){
      lvl++;
    }
    return lvl;//最小的值是1,最大值是3
  }




</script>
<script>

  /*
  *
  * 密码: 数字,字母,特殊符号
  *
  * 密码: 只有数字- 或者是只有字母,或者是只有特殊符号---1级---弱
  * 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号   -----2级----中
  * 三者都有: 数字和字母和特殊符号------3级-----强
  *
  * */

//  //获取文本框注册键盘抬起事件
//  my$("pwd").onkeyup=function () {
//    //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
//    //如果密码的长度是小于6的,没有必要判断
//    if(this.value.length>=6){
//      var lvl=getLvl(this.value);
//      if(lvl==1){
//        //弱
//        my$("strengthLevel").className="strengthLv1";
//      }else if(lvl==2){
//        my$("strengthLevel").className="strengthLv2";
//      }else if(lvl==3){
//        my$("strengthLevel").className="strengthLv3";
//      }else{
//        my$("strengthLevel").className="strengthLv0";
//      }
//    }else{
//      my$("strengthLevel").className="strengthLv0";
//    }
//
//
//  };
//
//  //给我密码,我返回对应的级别
//  function getLvl(pwd) {
//    var lvl=0;//默认是0级
//    //密码中是否有数字,或者是字母,或者是特殊符号
//    if(/[0-9]/.test(pwd)){
//      lvl++;
//    }
//    //判断密码中有没有字母
//    if(/[a-zA-Z]/.test(pwd)){
//      lvl++;
//    }
//    //判断密码中有没有特殊符号
//    if(/[^0-9a-zA-Z_]/.test(pwd)){
//      lvl++;
//    }
//    return lvl;//1  3
//  }
//



</script>





</body>
</html>